<template>
    <div class="post">

        <div class="add-address" @click="addAddress">
            +新增收货地址
        </div>
        
        <div class="selected-card" v-if="mailAddressList.length > 0">
            <div class="name">
                <span>
                    {{ selectedAddress.mailname || '-' }}
                </span>

                <span>
                    {{ selectedAddress.mailmobile }}
                </span>
            </div>
            <div class="address">
                <span>
                    {{ selectedAddress.address }}
                </span>
            </div>
        </div>

        <div 
            class="all-post-card" 
    
        >

            <div class="line"></div>

            <div 
                :class="active === index ?  'selected-card' : 'post-card'" 
                v-for="(item,index) in mailAddressList" :key="index"
                @click="cardClick(item,index)"

            >
                <div class="name">
                    <span>
                        {{ item.mailname }}
                    </span>

                    <span>
                        {{ item.mailmobile }}
                    </span>
                </div>
                <div class="address">
                    <span>
                        {{ item.address }}
                    </span>
                </div>
            </div>
        </div>

        <div class="more" @click="moreClick">
            {{ moreText }}
        </div>


        <post-from
            v-if="postFromDialog"
            ref="postFromDialogRef"
            @close="postFromclose"
        >

        </post-from>

        
    </div>
</template>
<script>
import postFrom from './postForm.vue'
export default {
    components:{
        postFrom,
    },

    props: {

    },
    data() {
        return {
            active:'',
            listShow:false,
            moreText:'更多地址+',
            selectedAddress:{},
            postFromDialog:false,
            mailAddressList:[],
        }
    },
    watch:{

        mailAddressList:{
            handler(n,o){
                let list  = n.filter((item,index) =>{
                    return item.isdefault === '1'
                })

                if(list.length > 0){
                    this.selectedAddress = list[0];
                    var index = n.findIndex((item) => {
                        return item.isdefault === "1";
                    });
                    this.active = index;  
                }else{
                    this.selectedAddress = n[0];
                    this.active = 0;  
                }
            },
            deep:true,
            immediate:true
        }


    },
    methods:{
        moreClick(){
            let all = document.querySelector('.all-post-card');
            if( this.listShow === false){
                this.listShow = true;
                this.moreText = '收起地址-' ;
                all.style.maxHeight = '800px';
            }else{
                this.listShow = false;
                this.moreText = '更多地址+' ;
                all.style.maxHeight = 0
            }
        },

        cardClick(val,index){
            this.selectedAddress = val;
            this.active = index;
        },

        addAddress(){
            this.postFromDialog = true;
        },

        postFromclose(val){
            this.postFromDialog = false;
            if(val === 'refresh'){
                this.getMailAddressList();
            }
        },

        
        async getMailAddressList(){
            await  this.$api.mailaddresslist().then(res =>{
                this.mailAddressList = res;
            })
        }


    },
    mounted(){

    }
}
</script>
<style lang="less" scoped>
    @primary-padding: 14px;
    @primary-margin: 14px;
    @primary-color: #ee6e26;
    .post{

        .add-address{
            color: @primary-color;
            text-align: center;
            padding: @primary-padding;
            border-bottom: 1px solid  #e4e4e4;
        }

        .selected-card{
            position: relative;
            overflow: hidden;
            width: 90%;
            margin: @primary-margin auto;
            padding: 20px @primary-padding  @primary-padding;
            border: 1px solid #e4e4e4;
            border-radius:5px ;
            .name{
                font-size: 18px;
            }
            .address{
                margin-top: 8px;
                color: rgb(162, 152, 148);
            }
        }

        .selected-card::before{
            content: '\9009\4e2d\5730\5740';
            // opacity: 0.6;
            position: absolute;
            left: 28px;
            top: -14px;
            background: @primary-color;
            color: white;
            width: 14em;
            text-align: center;
            -webkit-transform: rotate(-15deg) translate(-50%, -50%);
                    transform: rotate(-15deg) translate(-50%, -50%);
        }

        .all-post-card{
            max-height: 0;
            overflow: hidden;
            margin-top: @primary-margin;
            transition: all 0.7s;
            .line{
                border-top: 2px solid  @primary-color;
                margin-bottom: @primary-margin;
            }

            .post-card{
                position: relative;
                overflow: hidden;
                width: 90%;
                margin: 0 auto @primary-margin auto;
                padding: @primary-padding;
                border: 1px solid #e4e4e4;
                border-radius:5px ;


                .name{
                    font-size: 18px;
                }
                .address{
                    margin-top: 8px;
                    color: rgb(162, 152, 148);
                }
            }
        }

        .more{
            position: relative;
            text-align: center;
            padding-bottom: @primary-padding;
        }

    }


</style>